<template>
  <div :style="{ width: `calc((100% - ${(row - 1) * 28}px) / ${row})` }">
    <el-card class="box-card">
      <div class="box-title">
        <div>
          {{ title }}
          <!-- <el-link style="margin-left: 8px" :underline="false">
            查看全部<i class="el-icon-arrow-right"></i>
          </el-link> -->
        </div>
        <!-- <div>
          <slot></slot>
        </div> -->
      </div>
      <div :id="echartId" style="width: 100%; height: 100%"></div>
    </el-card>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      // card的标题
      default: "数据统计",
      type: String,
    },
    row: {
      // 一行放几个crad-box
      default: 2,
      type: Number,
    },
    echartId: {
      // 用于card中的echarts图标的存储器元素的id, 本项目所有的传在此处的id都不应该相同
      // 防止页面中有两个id相同的元素存在时,echarts图标只会绘制第一个
      default: "",
      type: String,
    },
    option: {
      default: () => {},
      type: Object,
    },
  },
  data() {
    return {};
  },
  mounted() {
    this.updateChart();
  },
  methods: {
    updateChart() {
      var myChart = this.$echarts.init(document.getElementById(this.echartId)); // 指定图表的配置项和数据
      // var option = this.option;
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(this.option);
    },
  },
};
</script>
<style scoped>
.box-card {
  height: 330px;
  width: 100%;
  margin-bottom: 28px;
  border-radius: 8px;
  box-shadow: 0 0 30px rgba(30, 38, 76, 0.1);
}
.box-title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: 17px;
  font-weight: bold;
  font-family: "PingFang";
  color: #6c6880;
}
</style>
